<template>
    <div class="addressAdd flex flexv">
        <pub-head title="添加收货地址" v-if="isAdd"></pub-head>
        <pub-head title="编辑收货地址" v-else></pub-head>

        <ul class="add-items flex flexv mt2">
            <li class="add-item flex">
                <span class="name bold">收货人</span>
                <input type="text" maxlength="10" placeholder="请输入收货人姓名" v-model="name" class="flex1">
            </li>
            <li class="add-item flex">
                <span class="name bold">联系电话</span>
                <input type="text" maxlength="11" placeholder="请输入联系电话" v-model="tel" class="flex1">
            </li>
            <li class="add-item flex click" @click="selectArea">
                <span class="name bold">省/市/区</span>
                <input type="text" v-model="area" readonly placeholder="请选择" class="flex1 tr address">
            </li>
            <li class="add-item flex daddress">
                <textarea v-model="xaddress" rows="3" maxlength="30" placeholder="详细地址" class="xaddress flex1"></textarea>
            </li>
        </ul>

        <!-- <div class="set-default flex jus-b click mt2" @click="setDefa">
            <span class="bold bold">设为默认地址</span>
            <span class="default" :class="{'defaulted': ison}"></span>
        </div> -->

        <!-- 省市区 -->
        <van-popup v-model="isAddress" position="bottom" class="flex">
            <van-area class="flex1" :area-list="areaList" value="360102" title="选择地区"  @cancel="isAddress = false" @confirm="pickArea" />
        </van-popup>

        <div class="pup-submit-btn"><button type="submit" class="btn" @click="addAddress">保存</button></div>
    </div>
</template>
<script>
import Vue from 'vue';
import pubHead from '@/components/head';
import areaList from '@/store/area.js';
import { u_Reg } from '@/config/utils';
import { AddAddress, EditAddress, SubEditAdd } from '@/request/api';
import { Popup, Toast, Area } from 'vant'; 

export default {
    data(){
        return{
            isAdd: true, // 添加地址？
            name: null, // 收货人
            tel: null, // 联系电话
            area: null, // 省市区
            province: null, // 省市区
            city: null, // 市
            county: null, // 区
			region:null,//县或区
            xaddress: null, // 详细地址
            ison: false, // 是否默认地址
            isAddress: false, // 显示省市区选择弹窗
            areaList: areaList, // 省市区列表
            areaId: null, //
            status: null,//地址状态
			addressId:''
        }
    },
    components: {
        pubHead,
        'van-area': Area
    },
    watch: {
        tel(oldVal,newVal){
            if (!(/^[0-9]*$/).test(this.tel)) {
                this.tel = this.tel.replace(/[^\d]/g,'')
            }
        },
        name(oldVal,newVal){
            if (!(/^[\u4E00-\u9FA5]{0,}$/).test(this.name)) {
                this.name = this.name.replace(/[^\u4E00-\u9FA5]/g,'')
            }
        },
        xaddress(oldVal, newVal){
            if (this.xaddress.length >30) {
                this.xaddress = this.xaddress.substring(0,30)
            }
        }
    },
    created(){
		console.log(this.$route.params)
        if (this.$route.params.address_id) {
            this.isAdd = false
			const data = this.$route.params
			 this.name = data.name;
			 this.tel = data.phone;
			 this.area = data.province + data.city + data.region;
			 this.province = data.province,
			 this.city = data.city,
			 this.region = data.region,
			 this.xaddress = data.detail;
			 this.ison = (data.isdefault == 1) ? true : false;
			 this.status = data.isdefault;
			 this.addressId = data.address_id
			}
            // this.$loading('请稍后...');
   //          EditAddress({
   //              user_id:   sessionStorage.getItem('userID'),
   //              address_id: this.$route.query.id
   //          }).then(res => {
   //              if (res.code == 1) {
   //                  Toast.clear();
   //                  const data = res.data.add_info;
   //                  this.name = data.shperson;
   //                  this.tel = data.mobile;
   //                  this.area = data.province + data.city + data.county;
   //                  this.province = data.province,
   //                  this.city = data.city,
   //                  this.county = data.county,
   //                  this.xaddress = data.detail_info;
   //                  this.ison = (data.status == 1) ? true : false;
   //                  this.status = res.data.is_status;
   //              } else {
   //                  Toast.clear();
   //                  this.$tip(res.msg)
   //              }
   //          })
			
    },
    methods: {
        // 添加地址
        addAddress(){
            if(!u_Reg(this.name, 'notEmpty')){this.$tip('请填写收货人！');return}
            if(!u_Reg(this.tel, 'notEmpty')){this.$tip('请填写联系电话！');return}
            if(!u_Reg(this.tel, 'phone')){this.$tip('手机号格式错误!');return}
            if(!u_Reg(this.area, 'notEmpty')){this.$tip('请选择省市区！');return}
            if(!u_Reg(this.xaddress, 'notEmpty')){this.$tip('请填写详细地址！');return}
            if (this.isAdd) {
                AddAddress({
                    token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
                    isdefault: this.ison == true ? 1 : 0,
                    name: this.name,
                    phone: this.tel,
                    province: this.province,
                    city: this.city,
                    region: this.county,
                    details: this.xaddress
                }).then(res => {
                    if (res.code == 1) {
                        this.$tip('设置成功');
                        setTimeout(() =>{
                            this.$router.go(-1);
                        },1000)
                    } else {
                        this.$tip(res.msg);
                    }
                })
            } else {
                SubEditAdd({
                   token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
                   isdefault: this.ison == true ? 1 : 0,
                   name: this.name,
                   phone: this.tel,
                   province: this.province,
                   city: this.city,
                   region: this.region,
                   detail: this.xaddress,
				   address_id:this.addressId
                }).then(res => {
                    if (res.code == 1) {
                        this.$tip('编辑成功');
                        setTimeout(() =>{
                            this.$router.go(-1);
                        },1000)
                    } else {
                        this.$tip(res.msg);
                    }
                })
            }
            
        },
        // 默认地址
        setDefa(){
            if (this.status == 0) {
                this.$tip('不可取消默认地址');
            } else {
                this.ison = !this.ison
            }
            
        },
        selectArea() {
            this.isAddress = !this.isAddress
        },
        pickArea(e) {
            this.areaId = e[2].code;
            if (this.areaId == -1) {
                this.toast('请选择地区');
                return;
            }
            this.area = e[0].name + e[1].name + e[2].name;
            this.province = e[0].name;
            this.city = e[1].name;
            this.county = e[2].name;
            this.isAddress = false;
        },
    },
}
</script>
<style lang="less" scoped>
.addressAdd{
    min-height: 100vh;
    background-color: #f0f0f0;
    .add-items{
        background-color: #fff;
        .add-item{
            height: 0.9rem;
            padding: 0 0.28rem;
            border-bottom: 1px solid #dedede;
            font-size: 0.3rem;
            color: #333;
            line-height: 0.9rem;
            .name{
                width: 1.6rem;
            }
            .address{
                padding-right: 0.3rem;
                background: url('~@/assets/to-ico.png') no-repeat right center;
                background-size: 0.16rem 0.28rem;
            }
        }
        .daddress{
            height: auto;
            padding: 0.28rem;
            line-height: 150%;
        }
    }
}
</style>
<style lang="less">
.addressAdd{
    .van-picker__toolbar{
        background-color: #5AAF33;
        color: #fff;
    }
    .van-picker__cancel, .van-picker__confirm{
        font-size: 0.3rem;
        color: #fff;
    }
    .van-picker-column__item--selected{
        color: #5AAF33;
    }
    .van-picker__title{
        font-size: 0.32rem;
    }
	//按钮的公告样式
	.pup-submit-btn {
		margin-top: 1rem;
		padding: 0 0.3rem;
		.btn{
			width: 100%;
			height: 0.88rem;
			line-height: 0.88rem;
			border-radius: 0.1rem;
			background: #5AAF33;
			font-size: 0.32rem;
			text-align: center;
			color: #fff;
		}
	}
}
</style>
